<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮悬停效果</title>
</head>
<body>
    <nav>
        <ul>
            <li>home</li>
            <li>products</li>
            <li>services</li>
            <li>contact</li>
        </ul>
    </nav>
</body>
<style>
    body{
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightyellow;
    }
    nav li{
        width: 8em;
        height: 2em;
        font-size: 25px;
        text-align: center;
        line-height: 2em;
        font-family: sans-serif;
        text-transform: capitalize;
        position: relative;
        cursor: pointer;
        list-style: none;
    }
    nav li::before,
    nav li::after{
        content: "";
        position: absolute;
        width: 0.6em;
        height: 0.6em;
        background-color: gainsboro;
        border-radius: 50%;
    }
    nav li::before{
        top:calc(50% - 0.6em /2);
        left: 0;
    }
    nav li::after{
        bottom: calc(50% - 0.6em / 2);
        right: 0;
    }
    /*鼠标悬停效果*/
    nav li:hover::before,
    nav li:hover::after{
        width: 100%;
        height: 100%;
        border-radius:  0;

        background-color: dodgerblue;
    }
    nav li:hover{
        color: white;
    }
    nav li:hover:before{
        z-index: -1;
        top: 0;
    }
    nav li:hover::after{
        z-index: -2;
        bottom: -0.4em;
        right: -0.4em;
        filter:brightness(0.8);
    }
    nav li{
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s ;
        -ms-transition: 0.5s ;
        -o-transition: 0.5s ;
        transition: 0.5s ;
        margin: 0.8em;
    }
    nav li::before,
    nav li::after{
        -webkit-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -moz-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -ms-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -o-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
    }
</style>
</html>